<template>
  <div>
    <div>
      <div>
        <!-- //搜索框 -->
        <!-- <el-amap-search-box :search-option="searchOption" :on-search-result="onSearchResult" /> -->
        <!-- 地图 -->
        <el-amap class="amap-box" :zoom="amap.zoom" :center="amap.center" :plugin="amap.plugin" :events="amap.events"
          :zoomEnable="updateStatus" :dragEnable="updateStatus" :doubleClickZoom="false">
          <!-- 当前位置图标 -->
          <el-amap-marker v-for="(marker, index) in amap.markers" :key="'marker' + index" :position="marker.position"
            :icon="iconImg" :extData="marker" :title="marker.text" />
          <!-- 位置名称显示 -->
          <el-amap-text v-for="(marker, index) in amap.markers" :key="'text' + index" :text="marker.text"
            :offset="marker.offset" :position="marker.position" />
        </el-amap>
      </div>
    </div>
  </div>
</template>
<script>
import { getAddress } from '@/api/rehearsal/index.js';
export default {
  name: "Map",
  data() {
    const vm = this;
    return {
      updateStatus: false,
      iconImg:
        "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
      // form对象
      dataForm: {
        lat: "39.98294", // 纬度
        lon: "116.319802", // 经度
        orgAddr: "",
        province: "",
        city: "",
        district: "",
      },
      // 地图搜索对象
      searchOption: {
        city: "全国",
        citylimit: true,
      },
      lng: 0,
      lat: 0,
      // markerEvents: {
      //   click(e) {
      //     // console.log(e.target.w.extData);
      //     console.log(e);
      //     vm.markerClick([e.lnglat.lng, e.lnglat.lat]);
      //   },
      // },
      // 地图对象
      amap: {
        zoom: 14,
        center: [116.319802, 39.98294],
        events: {
          init: async (map) => {
            map.setMapStyle("amap://styles/b939a90d808e524ec33815f8ab556c72");
            // this.Map = map;
            // console.log(map);
            // console.log(map.getCenter());

            // this.$store.dispatch('app/setCity', map.getAdcode());
          },
          // 点击获取地址的数据
          click(e) {
            if (!vm.updateStatus) {
              return
            }
            const { lng, lat } = e.lnglat;
            vm.dataForm.lon = lng;
            vm.dataForm.lat = lat;
            getAddress(lng, lat).then(res => {
              if (res.code == 200) {
                vm.amap.markers = [];
                const obj = {
                  position: [lng, lat],
                  text: res.msg,
                  offset: [0, 30],
                };
                vm.amap.markers.push(obj);
                vm.sure();
                // this.$set(this.form, 'locname', res.msg)
              }
            })

            // 这里通过高德 SDK 完成。
            // var geocoder = new AMap.Geocoder({
            //   radius: 100,
            //   extensions: "all",
            // });
            // geocoder.getAddress([lng, lat], function (status, result) {
            //   if (status === "complete" && result.info === "OK") {
            //     if (result && result.regeocode) {
            //       vm.dataForm.orgAddr = result.regeocode.formattedAddress;
            //       vm.dataForm.province =
            //         result.regeocode.addressComponent.province;
            //       vm.dataForm.city = result.regeocode.addressComponent.city;
            //       vm.dataForm.district =
            //         result.regeocode.addressComponent.district;
            //       vm.dataForm.adcode = result.regeocode.addressComponent.adcode;
            //       vm.dataForm.lat = lat ? lat.toString() : "";
            //       vm.dataForm.lon = lng ? lng.toString() : "";
            //       vm.amap.markers = [];
            //       const obj = {
            //         position: [lng, lat],
            //         text: result.regeocode.formattedAddress,
            //         offset: [0, 30],
            //       };
            //       vm.amap.markers.push(obj);
            //       vm.sure();
            //     }
            //   }
            // });
            vm.$nextTick();
          },
        },
        // plugin: [
        //   {
        //     // 定位
        //     pName: "Geolocation",
        //     events: {
        //       init(o) {
        //         // o是高德地图定位插件实例
        //         o.getCurrentPosition((status, result) => {
        //           console.log("定位：", result);
        //           if (result && result.position) {
        //             // 设置经度
        //             vm.lng = result.position.lng;
        //             // 设置维度
        //             vm.lat = result.position.lat;
        //             // 设置坐标
        //             vm.amap.center = [vm.lng, vm.lat];
        //             let op = {
        //               position: [vm.lng, vm.lat],
        //               text: result.formattedAddress,
        //               offset: [0, 30],
        //             };
        //             vm.amap.markers.push(op);
        //             // 页面渲染好后
        //             vm.$nextTick();
        //           }
        //         });
        //       },
        //     },
        //   },
        // ],
        //
        markers: [
          // {
          //   position: vm.amap.center,
          //   // text: result.formattedAddress,
          //   offset: [0, 30],
          // },
        ],
      },
    };
  },
  created() {
  },
  methods: {
    async mapDraw(arriveCoor) {
      console.log('123',arriveCoor)
      if (arriveCoor.length > 0 && arriveCoor[0] && arriveCoor[1]) {
        const res = await getAddress(arriveCoor[0], arriveCoor[1])
        if (res.code == 200) {
          let address = res.msg
          this.amap.markers = [];
          this.amap.center = arriveCoor;
          let op = {
            position: arriveCoor,
            offset: [0, 30],
            text: address,
          };
          this.amap.markers.push(op);
          // this.$set(this.form, 'locname', res.msg)
        }
      }
    },
    handleUpdate(status) {
      console.log(status, 'status')
      this.updateStatus = status
    },
    // 地图搜索回调
    onSearchResult(pois) {
      const vm = this;
      vm.amap.markers = [];
      let latSum = 0;
      let lngSum = 0;
      console.log("地图回调", pois);
      if (pois.length > 0) {
        pois.forEach((poi, index) => {
          const { lng, lat } = poi;
          if (index === 0) {
            lngSum = lng;
            latSum = lat;
            const obj = {
              position: [poi.lng, poi.lat],
              text: poi.name,
              offset: [0, 30],
            };
            vm.amap.markers.push(obj);
            console.log("地图搜索回调", poi);
            vm.dataForm.orgAddr = poi.name;
            vm.dataForm.lat = poi.lat ? poi.lat.toString() : "";
            vm.dataForm.lon = poi.lng ? poi.lng.toString() : "";
          }
        });
        vm.amap.center = [lngSum, latSum];
      }
    },
    markerClick(data) {
      if (!this.updateStatus) {
        return
      }
      console.log('data', data)
      // let lng,
      //   lat,
      //   vm = this;
      // this.dataForm.lon = lng = data[0];
      // this.dataForm.lat = lat = data[1];
      // // 这里通过高德 SDK 完成。
      // var geocoder = new AMap.Geocoder({
      //   radius: 100,
      //   extensions: "all",
      // });
      // geocoder.getAddress([lng, lat], function (status, result) {
      //   if (status === "complete" && result.info === "OK") {
      //     if (result && result.regeocode) {
      //       console.log("点击获取地址的数据", result);
      //       vm.dataForm.orgAddr = result.regeocode.formattedAddress;
      //       vm.dataForm.province = result.regeocode.addressComponent.province;
      //       vm.dataForm.city = result.regeocode.addressComponent.city;
      //       vm.dataForm.district = result.regeocode.addressComponent.district;
      //       vm.dataForm.adcode = result.regeocode.addressComponent.adcode;
      //       vm.dataForm.lat = lat ? lat.toString() : "";
      //       vm.dataForm.lon = lng ? lng.toString() : "";
      //       vm.sure();
      //     }
      //   }
      // });
    },
    async getAddress(lon, lat) {
      const res = await getAddress(lon, lat)
      if (res.code == 200) {
        return res.msg
        // this.$set(this.form, 'locname', res.msg)
      }
    },
    // 提交方法
    sure() {
      const vm = this;
      this.$emit("updateLocation", vm.dataForm);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .amap-icon img {
  max-width: 2rem !important;
  max-height: 2rem !important;
}

.amap-box {
  height: 350px;
  //   height: 44vh;
  //   height: calc(100vh - 45px);
}

// ::v-deep .amap-labels {
//   cursor: pointer;
// }
// ::v-deep .amap-markers {
//   pointer-events: none;
// }
.el-vue-search-box-container {
  // top: 45px;
  width: 100% !important;
}

.search-box {
  position: absolute;
  z-index: 5;
  width: 70%;
  left: 13%;
  top: 10px;
  height: 30px;
}

.search-box .el-input {
  float: left;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 0 7px 7px 0;
  outline: none;
  position: relative;
}

.search-box .el-button {
  position: absolute;
  right: 0;
  top: 1px;
  width: 20%;
  background: #38a28a;
  border-radius: 0 7px 7px 0;
  border: none;
  color: #fff;
  outline: none;
}

.tip-box {
  text-align: center;
  width: 100%;
  position: absolute;
  top: 35px;
  padding: 10px 0;
  background-color: #fff;
  opacity: 0.8;
}
</style>